$(function () {
    // 下拉框
    // 对所有下拉款进行初始化

    $(".sheng").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "../../plugin/M_select/js/M_select/up4.png",
        "Img2": "../../plugin/M_select/js/M_select/down4.png",
        "radius": "4px",
        "Title": "选择省份",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "03",
        Succee: function () {
            site = $('#select-sheng').val()
            console.log(site)
        }
    });
    $(".shi").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "../../plugin/M_select/js/M_select/up4.png",
        "Img2": "../../plugin/M_select/js/M_select/down4.png",
        "radius": "4px",
        "Title": "选择城市",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "03",
        Succee: function () {
            site = $('#select-shi').val()
            console.log(site)
        }
    });
    $(".jingqu").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "../../plugin/M_select/js/M_select/up4.png",
        "Img2": "../../plugin/M_select/js/M_select/down4.png",
        "radius": "4px",
        "Title": "选择景区",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "03",
        Succee: function () {
            site = $('#select-jingqu').val()
            console.log(site)
        }
    });

    // 百度地图API功能
    var map = new BMap.Map("mapBox");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(113.64, 34.75), 10);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    map.setCurrentCity("郑州");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setMapStyle({style: 'midnight'})
    //默认地图样式(normal)
    //清新蓝风格(light)
    //黑夜风格(dark)
    //清新蓝绿风格(bluish)
    //高端灰风格(grayscale)
    //强边界风格(hardedge)
    //青春绿风格(darkgreen)
    //浪漫粉风格(pink)
    //午夜蓝风格(midnight)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //红色警戒风格(redalert)

  //创建景点数组
    var ptList = [[113.017914, 34.519686], [113.332968, 34.717416], [113.263978, 34.607202], [113.208786, 34.658527], [113.543099, 34.742573], [113.595417, 34.781006], [113.636811, 34.75847]]




    // 添加标注点
    var myIcon;
    var marker;
    var content;
    myIcon = new BMap.Icon("../../images/icon-scenic.png", new BMap.Size(36, 47));
    for (let i = 0; i < ptList.length; i++) {
        var point = new BMap.Point(ptList[i][0], ptList[i][1]);
        console.log(ptList[i][0] + ',' + ptList[i][1])
        // 创建标注点
        marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);  //添加标注点
        // 注册点击事件
        marker.addEventListener("click", function (e) {
            openInfo(content, e)
        }
        );
    }
    marker.setOffset(new BMap.Size(0, -25))


    // 给多个标注点添加信息框
    var opts = {
        width: 340,     // 信息窗口宽度
        maiHheight: 20,     // 信息窗口高度
    };
    content = '<div class="infor-box">' +
        '                            <h3>嵩山少林寺</h3>' +
        '                            <div>' +
        '                                <a class="active" href="javascript:;">企业监测</a>' +
        '                                <a href="javascript:;">详细信息</a>' +
        '                                <a href="javascript:;">周边道路监测</a>' +
        '                                <a href="javascript:;">客流监测</a>' +
        '                                <a href="javascript:;">产品监测</a>' +
        '                                <a href="javascript:;">配套设施</a>' +
        '                            </div>' +
        '                        </div>';


    function openInfo(content, e) {
        console.log(e)
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }



    $('.infor-box a').click(function () {
        console.log(1)
        $(this).addClass('active').siblings().removeClass('active')
        let index = $(this).index()
        if (index == 5) {
            $('.facilities-box').show()
        } else ($('.facilities-box').hide())
    })
})
